<!-- 数据库管理 -->
<template>
  <div>
    <el-card>

      <div class="topInquire">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd">添加数据库</el-button>

        <div>
          <span>平台 </span>
            <el-select v-model="platformId" clearable filterable size="small" style="width:200px;">
              <el-option
                v-for="(item,index) in platformOpt"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </div>

        <div>
          <span>服务器 </span>
          <el-input v-model.number="serverValue" style="width:200px" size="small" placeholder="请输入服务器ID" />
        </div>

        <el-button size="small" icon="el-icon-search" type="primary" @click="searchBtn">搜索</el-button>
      </div>



      <div>
        <el-table
          ref="table"
          border
          :data="databaseData"
          :header-cell-style="{background:'#f5f7fa'}"
          :height="tableHeight"
          style="width: 100%;"
        >
          <el-table-column prop="dbName" label="数据库名"  />
          <el-table-column prop="platformId" label="平台ID"  />
          <el-table-column prop="serverId" label="服务器ID"  />
          <el-table-column prop="type" label="类型"  />
          <el-table-column prop="zoneId" label="区域ID"  />
          <el-table-column prop="alias" label="别名"  />
          <el-table-column prop="ipPort" label="IP端口"  min-width="130" />
          <el-table-column prop="user" label="用户"  />
          <el-table-column prop="password" label="密码"  />
          <el-table-column prop="minIdle" label="最小空闲数"  />
          <el-table-column prop="maxActive" label="最大激活数"  />
          <el-table-column prop="maxWaitMillis" label="等待连接的最长时间"  min-width="130" />
        
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <el-button size="small" type="primary" plain icon="el-icon-edit-outline" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>


      <!-- 弹窗 -->
      <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="45%"
      center
      :modal-append-to-body="false"
      @close="closeDialog"
    >
      <el-form :model="formData" label-width="100px" ref="ruleForm" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="数据库名" prop="dbName">
             <el-input v-model.trim="formData.dbName" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
            label="平台"
            prop="platformId"
          >
            <el-select v-model="formData.platformId" clearable filterable>
              <el-option v-for="item in platformOpt" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务器" prop="serverId">
              <el-input v-model.number="formData.serverId" placeholder="请输入服务器ID" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
             <el-input v-model.trim="formData.type" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区域ID" prop="zoneId">
             <el-input v-model.trim="formData.zoneId" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="别名" prop="alias">
             <el-input v-model.trim="formData.alias" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户" prop="user">
             <el-input v-model.trim="formData.user" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
             <el-input v-model.trim="formData.password" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最小空闲数" prop="minIdle">
             <el-input v-model.trim="formData.minIdle" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大激活数" prop="maxActive">
             <el-input v-model.trim="formData.maxActive" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="IP端口" prop="ipPort">
             <el-input v-model.trim="formData.ipPort" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等待连接的最长时间" label-width="150px" prop="maxWaitMillis">
             <el-input v-model.trim="formData.maxWaitMillis" placeholder="请输入" clearable />
           </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button size="medium" type="primary" @click="handleConfirm">确 定</el-button>
        <el-button size="medium" @click="closeDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { databaseManage,savaDatabaseManage } from '@/api/serverManage'
import { gamePlatformOpt } from '@/api/aboutOptions'

export default {
  data() {
    return {
      databaseData: [],
      currentPage: 1, // 当前页
      pageSize: 200, // 每页显示条数
      tableHeight: 0, // 表格高度
      total:0,
      serverValue:'',
      platformOpt: [],
      platformId: '',
      dialogTitle: '',
      dialogVisible: false,
      formData: {},
      rules: {
        dbName: [{ required: true, message: '请输入数据库名', trigger: 'blur' }],
        platformId:[{ required: true, message: '请选择平台', trigger: 'change' }],
        serverId:[{ required: true, message: '请输入服务器ID', trigger: 'blur' }],
        type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
        zoneId: [{ required: true, message: '请输入区域ID', trigger: 'blur' }],
        alias: [{ required: true, message: '请输入别名', trigger: 'blur' }],
        user: [{ required: true, message: '请输入用户', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        minIdle: [{ required: true, message: '请输入最小空闲数', trigger: 'blur' }],
        maxActive: [{ required: true, message: '请输入最大激活数', trigger: 'blur' }],
        ipPort: [{ required: true, message: '请输入IP端口', trigger: 'blur' }],
        maxWaitMillis: [{ required: true, message: '请输入等待连接的最长时间', trigger: 'blur' }],
      }
    }
  },

  created() {
    this.getDatabase()
    this.getPlatformList()
  },

  mounted() {
    this.$nextTick(() => {
      this.getTableHeight()
    })
    window.addEventListener('resize', this.$debounce(this.getTableHeight, 100))
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.getTableHeight)
  },

  methods: {
    // 获取数据
    async getDatabase() {
      const res = await databaseManage({
        page: this.currentPage,
        limit: this.pageSize
      })
      this.total = res.data.data.count
      this.databaseData = res.data.data.data
    },
    
    // 获取平台列表
    async getPlatformList() {
      const res = await gamePlatformOpt()
      this.platformOpt = res.data.data.options
    },

   // 新增
   handleAdd() {
      this.dialogTitle = '新增数据'
      this.dialogVisible = true
      this.formData.id = 0
    },

    // 编辑
    handleEdit(data) {
      this.dialogTitle = '编辑数据'
      this.formData = Object.assign({}, data)
      this.dialogVisible = true
    },

    // 确定
    async handleConfirm() {
      await this.$refs.ruleForm.validate(async(valid)=>{
        if (valid) {
          if (this.formData.id !== 0) {
          // 编辑
            const newData = Object.assign({}, this.formData)
            const res = await savaDatabaseManage(newData)
            if (res.data.code === 0) {
              this.$message.success(res.data.message)
            }
          } else {
          // 新增
            const res = await savaDatabaseManage(this.formData)
            if (res.data.code === 0) {
              this.$message.success(res.data.message)
            }
          }
          this.getDatabase()
          this.closeDialog()
        }
      })
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
      this.formData = {}
      this.$refs.ruleForm.clearValidate()
    },

    // 搜索按钮
    async searchBtn() {
      try {
        const query = {}
        if (this.serverValue) {
          query.serverId = this.serverValue
        }
        if (this.platformId) {
          query.platformId = this.platformId
        }
        const result = await databaseManage(query)
        this.databaseData = result.data.data.data
      } catch (error) {
        console.error(error)
        this.$message.error('发生错误，请稍后重试')
      }
    },

    // 表格自适应高度
    getTableHeight() {
      if (this.$refs.table && this.$refs.table.$el) {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 140
      } else {
        this.tableHeight = 300
      }
    },


  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-select{
  width: 100%;
}

.topInquire{
  font-weight: bold;
  font-size: 14px;
  color: #6a7488;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

</style>
